<!-- templates/forms/password_with_toggle.html -->
<div class="password-wrapper" style="position: relative; display: block;">
    <input type="{{ widget.type }}" name="{{ widget.name }}"{% if widget.value %} value="{{ widget.value }}"{% endif %}{% if widget.attrs.id %} id="{{ widget.attrs.id }}"{% endif %}{% if widget.attrs.class %} class="{{ widget.attrs.class }}"{% endif %}{% if widget.attrs.placeholder %} placeholder="{{ widget.attrs.placeholder }}"{% endif %}{% if widget.attrs.required %} required{% endif %}{% if widget.attrs.maxlength %} maxlength="{{ widget.attrs.maxlength }}"{% endif %}{% if widget.attrs.autocomplete %} autocomplete="{{ widget.attrs.autocomplete }}"{% endif %} style="width: 100%; padding-right: 40px;">
    <button type="button" class="password-toggle-btn" aria-label="Toggle password visibility" style="position: absolute; right: 10px; top: 50%; transform: translateY(-50%); background: none; border: none; cursor: pointer; padding: 5px; z-index: 10;">
         <i class="fas fa-eye-slash eye-closed p-2" style="color: #245daf;"></i>
         <i class="fas fa-eye eye-open p-2" style="color: #245daf; display: none;"></i>
    </button>
</div>

<script>
(function() {
    function initPasswordToggle() {
        const passwordWrappers = document.querySelectorAll('.password-wrapper');

        passwordWrappers.forEach(function(wrapper) {
            // Check if already initialized
            if (wrapper.hasAttribute('data-toggle-initialized')) {
                return;
            }

            const passwordInput = wrapper.querySelector('input');
            const toggleBtn = wrapper.querySelector('.password-toggle-btn');
            const eyeOpen = wrapper.querySelector('.eye-open');
            const eyeClosed = wrapper.querySelector('.eye-closed');

            if (toggleBtn && passwordInput && eyeOpen && eyeClosed) {
                toggleBtn.addEventListener('click', function(e) {
                    e.preventDefault();
                    e.stopPropagation();

                    if (passwordInput.type === 'password') {
                        passwordInput.type = 'text';
                        eyeOpen.style.display = 'none';
                        eyeClosed.style.display = 'block';
                    } else {
                        passwordInput.type = 'password';
                        eyeOpen.style.display = 'block';
                        eyeClosed.style.display = 'none';
                    }
                });

                // Mark as initialized
                wrapper.setAttribute('data-toggle-initialized', 'true');
            }
        });
    }

    // Initialize on DOM ready
    if (document.readyState === 'loading') {
        document.addEventListener('DOMContentLoaded', initPasswordToggle);
    } else {
        initPasswordToggle();
    }

    // Also initialize after a short delay to catch late-rendered elements
    setTimeout(initPasswordToggle, 100);
    setTimeout(initPasswordToggle, 500);
})();
</script>

<style>
.password-wrapper {
    position: relative;
    display: block;
}

.password-wrapper input {
    padding-right: 40px !important;
    box-sizing: border-box;
}

.password-toggle-btn {
    color: #6c757d;
}

.password-toggle-btn:hover {
    color: #495057;
}

.password-toggle-btn:focus {
    outline: 2px solid #007bff;
    outline-offset: 2px;
}
</style>
